<template>
    <div>
      <div class="crumb">
        <div class="w">
          <div class="crumb-con">
            <a class="link" href="./index.html">京东</a>
            <span>></span>
            <span class="link-text">订单列表</span>
          </div>
        </div>
      </div>
      <div class="order-list-wrap w">
        <div class="left-con">
          <ul class="menu">
            <li class="menu-item">
              <router-link class="link" to="/user">个人中心</router-link>
            </li>
            <li class="menu-item active">
              <router-link class="link" to="/orderList">我的订单</router-link>
            </li>
            <li class="menu-item">
              <router-link class="link" to="/reset">修改密码</router-link>
            </li>
          </ul>
        </div>
        <div class="right-con">
          <div class="panel">
            <div class="panel-title">
              我的订单
            </div>
            <div class="panel-body">
              <div class="order-list">
                <div class="order-list">
                  <table class="order-list-table header">
                    <tbody>
                    <tr>
                      <th class="order-list-cell cell-img">&nbsp;</th>
                      <th class="order-list-cell cell-info">商品信息</th>
                      <th class="order-list-cell cell-price">单价</th>
                      <th class="order-list-cell cell-count">数量</th>
                      <th class="order-list-cell cell-total">合计</th>
                    </tr>
                    </tbody>
                  </table>
                  <table class="order-list-table order-item">
                    <tbody  v-for="item in orderList">
                    <tr>
                      <td class="order-info" colspan="6">
                        <span class="order-text">
                          <span>订单号：</span><a class="link" href="">{{item.orderNo}}</a></span>
                        <span class="order-text">{{item.createTime}}</span>
                        <span class="order-text">
                          <span>收件人：{{item.receiverName}}</span>
                        </span>
                        <span class="order-text">
                          <span>订单状态：{{item.statusDesc}}</span>
                        </span>
                        <span class="order-text">
                          <span>订单总价：</span><span class="enhance">{{item.payment}}</span>
                        </span>
                        <a class="link pull-right" href="./order-detail.html?orderNumber=">查看详情&gt;</a>
                      </td>
                    </tr>
                    <tr v-for="subitem in item.orderItemVoList">
                      <td class="order-list-cell cell-img">
                        <a href="./detail.html?productId=107" target="_blank">
                          <img class="p-img" src="../../assets/tv-ssmall.jpg"></a>
                      </td>
                      <td class="order-list-cell cell-info">
                        <a class="link p-name" href="./detail.html?productId=107" target="_blank">{{subitem.productName}}</a>
                      </td>
                      <td class="order-list-cell cell-price">{{subitem.currentUnitPrice}}</td>
                      <td class="order-list-cell cell-count">{{subitem.quantity}}</td>
                      <td class="order-list-cell cell-total">{{subitem.totalPrice}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="pagination"></div>
          </div>
        </div>
      </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "OrderList",
      data(){
        return{
          orderList:[]
        }
      },
      created(){
        this.reqOrderList()
      },
      methods:{
        reqOrderList:function(){
          this.axios.get('/order/list.do',{params:{'pageSize':3}})
            .then((response) => {
              this.orderList = response.data.data.list
            })
        }
    }
    }
</script>

<style>
  .nav-side{
    float: left;
    width: 130px;
    min-height: 100px;
  }
  .nav-side .nav-item{
    line-height: 25px;
    font-size: 13px;
  }
  .nav-side .nav-item .link{
    color: #888;
  }
  .nav-side .nav-item.active .link{
    color: #c60023;
  }

  .content.with-nav{
    float: left;
    width: 950px;
  }

  .order-list-table{
    width: 100%;
    border-collapse: collapse;
    background: #fafafa;
    margin-bottom: 20px;
  }
  .order-list-table .cell{
    padding: 10px 0;
    color: #666;
    border-bottom: 1px solid #eee;
  }
  .order-list-table.header{
    background: #eee;
  }
  .order-list-table .order-info{
    background: #eee;
    padding: 10px;
    color: #999;
  }
  .order-list-table .order-info .order-text{
    margin-right: 25px;
  }
  .order-list-table .order-info .order-num{
    font-weight: bold;
  }
  .order-list-table .order-info .order-total{
    font-weight: bold;
    color: #c60023;
  }
  .order-list-table .order-info .order-detail{
    float: right;
  }

  .order-list-table .cell-img{
    padding: 10px;
    width: 10%;
    text-align: center;
  }
  .order-list-table .cell-img .p-img{
    width: 80px;
    height: 80px;
    border: 1px solid #ddd;
  }
  .order-list-table .cell-info{
    width: 45%;
    text-align: left;
  }
  .order-list-table .cell-price{
    width: 15%;
    text-align: center;
  }
  .order-list-table .cell-count{
    width: 15%;
    text-align: center;
  }
  .order-list-table .cell-total{
    width: 15%;
    text-align: center;
  }
</style>
